<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="background-blend-mode">
        
        <div class="circle-1"></div>

        <div class="box"></div>
    </div>
</template>

<style scoped>
.wrapper {
    height: 100%;
    padding: 8px;
    overflow: auto;
}

.circle-1 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: linear-gradient(deeppink, deeppink), linear-gradient(deepskyblue, deepskyblue);
    /* background-blend-mode: overlay; */
}

.box {
    width: 200px; height: 200px;
    background: linear-gradient(to right bottom, deeppink 50%, transparent 50%),
        linear-gradient(to top right, deeppink 50%, transparent 50%), 
        darkblue;
    background-blend-mode: multiply, screen;
    position: relative;
}

/* 中间原始的deeppink色值 */
.box::before {
    content: '';
    position: absolute;
    width: 33%; height: 33%;
    inset: 0;
    margin: auto;
    background-color: deeppink;
}
</style>